<template>
	<view>
		<view class="jui_pad_r20 jui_bg_fff jui_flex_justify_end jui_flex"></view>
		<view class="jui_main jui_gwc_bar ">
			<view  class="edit-frame">
				<span @tap="finish" v-if='delshow'>完成</span>
				<span @tap="edite" v-if='!delshow && list && list.length'>编辑</span>
			</view>
			<view class="jui_gwc_list jui_flex jui_flex_items_center jui_bg_fff" v-for="(item, index) in list"
				:key="index">
				<checkbox class="jui_mar_r20" type="checkbox" :checked="item.checked" @tap="single(item, index)" />
				<view class="jui_gwc_pro_img">
					<image :src="item.attachs" mode="aspectFit" style="width: 100%; height:100%"></image>
				</view>
				<view class="jui_flex1 jui_pad_l12 jui_flex_items_end jui_ellipsis_1">
					<view class="jui_fc_000 jui_pad_b5 jui_fs28">
						<view class="jui_ellipsis_1">{{ item.goodsName }}</view>
						<view>
							<view class="jui_flex_row_center jui_pad_b8" v-if="item.format_name">
								<view class="pro_guige fs24 jui_fc_999">{{ item.format_name }}</view>
							</view>
							<view class="jui_flex_row_center jui_flex_justify_between jui_mar_t20  jui_font_w500">
								<view>
									<view class="jui_fc_fuse jui_fs29">
										<text
											class="price ">￥{{ item.ismember ? item.memberPrice : item.marketPrice}}
											</text>
									</view>
									<view class=" price_hy jui_fs29">
										<text
											class="price ">{{ item.ismember ? item.ydysmemberPrice : item.ydysmarketPrice}}
											</text>
									</view>
								</view>
								
								<view class="jui_gwc_num_bar jui_flex jui_flex_items_center"
									style="font-size: 38upx !important;">
									<image src="../../static/imgs/home/-.png" style="height: 24upx;width: 24upx;"
										mode="" class="jui_mar_r20" @tap="jia(item, -1)"></image>
									<input class="jui_gwc_pro_num  jui_text_center" value="1" type="text"
										:disabled="true" readonly v-model="item.number"
										style="height: 30upx !important;width: 70upx;" />
									<image src="../../static/imgs/home/+.png" style="width: 24upx;height: 24upx;"
										class="jui_mar_l20" mode="" @tap="jia(item, 1)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="jui_h100"></view>
		<view class="jui_flex_justify_between gwc_foot ">
			<label class="jui_flex_row_center jui_pad_l20 jui_flex_no jui_pad_r12 jui_pad_1216 ">
				<!-- 购物车全选 -->
				<checkbox id="AllCheck" class="jui_pad_b5" type="checkbox" :checked="checked" @tap="all()" />
				<text class="jui_pad_l8 jui_fs24">全选</text>
			</label>
			<view class="jui_gwc_foot_right jui_flex jui_flex_justify_between " id="hj" style="width: 80%;">
				<view class=" jui_flex jui_flex_items_center jui_fc_red" style="width: 70%;">
					<view style="display: flex; width: 100%; align-items: center;">
						<view>
							<text class="jui_fs28 jui_fc_000">总计：</text>
						</view>
						<view>
							<view>
								<text id="AllTotal " class="jui_fs30">￥{{allPrice}}</text>
							</view>
							<view>
								<text id="AllTotal " class="jui_fs30 price_hy">{{allPriceHb}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="jui_flex jui_flex_items_center">
					<view class="jui_flex_center jui_gwc_btn jui_fs28 jui_bor_rad_40  jui_mar_r20"
						style="padding: 0upx 30upx;border-radius: 40upx;border: 2upx solid #FF0000;color: #FF0000;height:70rpx;width: 150rpx;"
						@tap="show=true" v-if="delshow">
						删除
					</view>
					<view v-if="!delshow" class="jui_flex_center jui_gwc_btn jui_bg_fuse jui_fs28  "
						style="height:70rpx;width: 150rpx;" @tap="cartBuy">立即购买</view>
				</view>
			</view>
		</view>
		<empty position="jui_fixed" v-if="list.length < 1"></empty>
		<view v-if="show">
			<modalConfirm tips="确认删除商品？" @modalCancle="show = false" @modalConfirm="modalConfirm">
			</modalConfirm>
		</view>
		<!-- 弹出框end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				checked: false,
				show: false,
				delshow: false
			};
		},
		//导航栏按钮事件
		onNavigationBarButtonTap(e) {
			var index = e.index;
			// #ifdef APP-PLUS
			var currentWebview = this.$mp.page.$getAppWebview();
			var tn = currentWebview.getStyle().titleNView;
			var text = tn.buttons[0].text;
			if (text == '编辑') {
				this.cartStatus = true;
				tn.buttons[0].text = '完成';
				this.delshow = true;
				currentWebview.setStyle({
					titleNView: tn
				});
			} else if (text == '完成') {
				this.cartStatus = false;
				tn.buttons[0].text = '编辑';
				this.delshow = false;
				currentWebview.setStyle({
					titleNView: tn
				});
			}
			// #endif

		},
		onShow() {
			this.init();
		},
		computed: {
			allPrice() {
				var totalPrice = 0;
				let memberPrice = 0;
				let marketPrice = 0;
				this.list.forEach((item, index) => {
					if (item.checked) {
						if (item.memberPrice && item.ismember) {
							memberPrice += item.memberPrice * item.number
						}
						if (item.marketPrice && !item.ismember) {
							marketPrice += item.marketPrice * item.number
						}
						if (memberPrice) {
							totalPrice = memberPrice
						}
						if (marketPrice) {
							totalPrice = marketPrice
						}
						if (memberPrice && marketPrice) {
							totalPrice = memberPrice + marketPrice
						}
					}
				})
				return Number(totalPrice).toFixed(1)
			},
			allPriceHb() {
				var allPriceHb = 0;
				let ydysmemberPrice = 0;
				let ydysmarketPrice = 0;
				this.list.forEach((item, index) => {
					if (item.checked) {
						if (item.ydysmemberPrice && item.ismember) {
							ydysmemberPrice += item.ydysmemberPrice * item.number
						}
						if (item.ydysmarketPrice && !item.ismember) {
							ydysmarketPrice += item.ydysmarketPrice * item.number
						}
						if (ydysmemberPrice) {
							allPriceHb = ydysmemberPrice
						}
						if (ydysmarketPrice) {
							allPriceHb = ydysmarketPrice
						}
						if (ydysmemberPrice && ydysmarketPrice) {
							allPriceHb = ydysmemberPrice + ydysmarketPrice
						}
					}
				})
				return Number(allPriceHb).toFixed(2)
			},
		},
		methods: {
			edite() {
				this.delshow = true;
			},
			finish(){
				this.delshow = false;
			},
			init() {
				this.checked = false;
				this.delshow = false;
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				let params = {
					userId: userId,
					_token: _token
				}
				this.$api.getShopCar(params).then(res => {
					if (res.ok) {
						let arry = res.data.map(item => {
							let imgarry = item.attachs.split(',')[0]
							return (
								Object.assign({}, item, {
									attachs: imgarry
								})
							)
						})
						arry && arry.length && arry.forEach((item, index) => {
							this.$set(item, "checked", false);
						})
						this.list = arry;
						if (this.list.length == 0) {
							this.checked = false;
						}
					}
				});
			},
			jia(item, num) {
				if (num > 0) {
					item.number += num;
				} else {
					if (num > 1) {
						item.number += num;
					} else {
						if (num < 0) {
							num = item.number--
							if (num < 1) {
								item.number = 0
								return;
							}
						}
					}
				}
				let data = {
					type: 1,
					id: item.id
				}
				data.type = num > 0 ? 1 : 2;
			},
			async single(item, index) {
				item.checked = !item.checked;
				var selLength = 0;
				await this.list.forEach((item, index) => {
					if (item.checked) {
						selLength++;
					}
				})
				if (selLength == this.list.length) {
					this.checked = true;
				} else {
					this.checked = false;
				}
			},
			all() {
				this.checked = !this.checked;
				this.list.forEach((item, index) => {
					item.checked = this.checked;
				})
			},
			cartBuy() {
				let car_id_str = '';
				let arr = [];
				let photoes = [];
				let numbers = [];
				this.list.forEach((item, index) => {
					if (item.checked) {
						arr.push(item.goodsId)
						photoes.push(item.attachs)
						numbers.push(item.number)
					}
				})
				if (arr.length == 0) {
					this.$msg('请选择要购买的商品');
					return false
				}
				car_id_str = arr.join(",");
				uni.navigateTo({
					url: `/pages/home/goodsDetail/placeOrder?from=cart&id_str=${car_id_str}&photoes=${photoes}&numbers=${numbers}`
				});
			},
			modalConfirm() {
				var that = this;
				this.show = false;
				let car_id_str = '';
				let arr = [];
				this.list.forEach((item, index) => {
					if (item.checked) {
						arr.push(item.id)
					}
				})
				if (arr.length == 0) {
					this.$msg('请选择要删除的商品');
					return false
				}
				car_id_str = arr.join(",");
				var data = {
					cartIds: car_id_str
				}
				this.$api.delShopCarNum(data).then(res => {
					if (res.ok) {
						that.$msg(res.msg);
						setTimeout(function() {
							that.init();
							this.delshow = false
						}, 500)
					}
				});
			}
		}
	};
</script>

<style>
	/deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
		border-color: #318bf2;
		/* background-color:#318BF2  !important; */
	}
	/deep/ uni-radio::before,
	uni-checkbox::before {
		/* color: #318BF2 !important; */
		right: 0;
	}
	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #318bf2 !important;
		background-color: #318bf2 !important;
		border: 2upx solid #318bf2;
	}
	/deep/ uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
		border: 2upx solid #979797;
		height: 30upx;
		width: 30upx;
	}
	page {
		background-color: #f7f7f7;
	}
	.edit-frame {
		height: 50rpx;
		line-height: 50rpx;
		background: #fff;
		border-bottom: 1px solid #ccc;
		text-align: right;
		padding-right: 26rpx;
		color: #00c4ff;
	}
	.gwc_foot {
		background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
		position: fixed;
		z-index: 5;
		/* #ifdef H5 */
		bottom: 50px;
		/* #endif */
		/* #ifdef APP-PLUS */
		bottom: 0px;
		/* #endif */
		left: 0px;
		right: 0px;
		height: 2.30666rem;
		background: #fff;
		display: box;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		-moz-align-items: center;
		-ms-align-items: center;
		-webkit-box-align: center;
		align-items: center;
	}
	/*购物车列表*/
	.jui_gwc_list {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 24rpx;
	}
	.jui_gwc_list .jui_form_radio {
		margin-right: 0.32rem;
		-webkit-align-self: center;
		-moz-align-self: center;
		-ms-align-self: center;
		align-self: center;
		-webkit-flex: 0 0 auto;
		-moz-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}
	.jui_gwc_pro_img {
		height: 4.8333rem;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		overflow: hidden;
		-webkit-flex: 0 0 4.8333rem;
		-moz-flex: 0 0 4.8333rem;
		-ms-flex: 0 0 4.8333rem;
		flex: 0 0 4.8333rem;
		margin: 0 10rpx;
	}
	.jui_gwc_pro_img img {
		width: 100%;
		height: 100%;
	}
	/*加减按钮*/
	/* .jui_gwc_num_bar{ border:1px solid #f0f0f0;} */
	.jui_gwc_list .jui_gwc_num_bar input {
		background: #f3f3f3;
		width: 70upx;
		height: 30upx;
		font-size: 28upx;
	}
	.jui_gwc_list .jui_add {
		color: #fff;
	}
	/*购物车底部*/
	.jui_gwc_btn {
		width: 2.9rem;
		height: 1.506rem;
		margin-left: 0.32rem;
		color: #fff;
	}
	.price_hy {
		color: #00c2ff;
	}
</style>
